<template>
	<div>
		<el-input v-model="searchform.uname" placeholder="请输入名字" style="width: 100px;"></el-input>
		<el-input v-model="searchform.sex" placeholder="性别" style="width: 100px;"></el-input>
		<el-button icon="el-icon-search" circle @click="queryData"></el-button>
		<el-button type="success" @click="resetSearchForm">重置</el-button>
		<el-button @click="addDept">添加</el-button>
		<el-button @click="tui">退出</el-button>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="名字" prop="uname">
						<el-input v-model="form.uname"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="form.password"></el-input>
					</el-form-item>
					<el-form-item label="生日" prop="birthday">
						<el-input v-model="form.birthday"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-select v-model="form.sex" placeholder="请选择性别">
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>



					<el-form-item label="角色" prop="rnamee">
						<el-select v-model="form.rnamee" placeholder="请选择角色">
							<el-option label="员工" value="员工"></el-option>
							<el-option label="管理员" value="管理员"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>



			</span>

		</el-dialog>

		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column label="名字" prop="uname">
			</el-table-column>
			<el-table-column label="密码" prop="password">
			</el-table-column>
			<el-table-column label="生日" prop="birthday">
			</el-table-column>
			<el-table-column label="性别" prop="sex">
			</el-table-column>
			<el-table-column label="角色" prop="rnamee">
			</el-table-column>

			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="deldemo(scope.row.id)" type="text" size="small">删除</el-button>
					<el-button type="text" size="small" @click="upddemo(scope.row)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="page.current" :page-sizes="[2, 4, 6,8, 10]" :page-size="page.size"
			layout="total, sizes, prev, pager, next, jumper" :total="page.total">
		</el-pagination>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				username: ""
			}
		},
		//获取
		created() {
			//localStorage里面取
			let usermsg = localStorage.getItem("user"); //存的是一个字符串  存的时候是一个字符串
			//获取对应的username Json对象
			let user = JSON.parse(usermsg); //{username:"",password:""}
			this.username = user.username;

		},
		methods: {
			//分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.page.size = val;
				this.queryData();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page.current = val;
				this.queryData();
			},
			resetSearchForm() {
				this.searchform = {};
				//重置
				this.queryData();
			},
			tui() {
				//localStorage里面的信息清除掉,浏览器里不会存在user信息
				localStorage.removeItem("user");
				// localStorage.clear();//清除全部
				//跳转到登录页面
				this.$router.push("/login2")
			},
			upddemo(obj) {
				//弹出提示
				 
				this.dialogVisible=true;
				//将按钮选中的那一行数据，填充到弹出框里
				this.form = obj; //浅拷贝
				//深拷贝
				 
				this.form=JSON.parse(JSON.stringify(obj));
			
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 4 === 0) {
					return 'warning-row';
				} else if (rowIndex % 4 === 2) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				// alert(JSON.stringify(this.searchform));
				//向后台发出请求，返回数据
				//第一种： const newobj={...this.searchform,...this.page};// 合并对象  ...
				// alert(JSON.stringify(newobj));
				const newobj = Object.assign(this.searchform, this.page);
				this.$axios.get("t-user", {

					// user:this.searchform.user,
					// pass:this.searchform.pass,
					// current:this.page.current,
					// size:this.page.size,
					params: newobj

				}).then(r => {
					// alert(JSON.stringify(r.data.t))
					this.tableData = r.data.t.records;
					// alert(JSON.stringify(this.tableData))
					// var aa=JSON.stringify(this.tableData)
					this.page.total = r.data.t.total;

				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			addDept() {
				// this.dialogVisible = true;
				this.dialogVisible=true;
				//清空绑定的form
				this.form = {};
			},
			// onSubmit(formName) {
			// 	// alert("提交");
			// 	//发出请求
			// 	// this.$axios.post("t-demo",qs.stringify(this.form)).then(r=>{
			// 	// 	 this.$message({
			// 	// 		 showClose:true,
			// 	// 	          message: r.data.msg,
			// 	// 	          type: 'success'
			// 	// 	        });


			// 	// });
			// 	this.$refs[formName].validate((valid) => {
			// 		if (valid) {
			// 			this.$axios.post("user/insert", qs.stringify(this.form)).then(r => {
			// 				this.$message({
			// 					showClose: true,
			// 					message: r.data.msg,
			// 					type: 'success'
			// 				})
			// 				//刷新数据
			// 				this.queryData();
			// 			});
			// 		} else {
			// 			// console.log('error submit!!');
			// 			return false;
			// 		}
			// 		this.dialogVisible = false;

			// 	});

			// },
			onSubmit(formName) {
				// alert("提交");
				//发出请求
				// this.$axios.post("t-demo",qs.stringify(this.form)).then(r=>{
				// 	 this.$message({
				// 		 showClose:true,
				// 	          message: r.data.msg,
				// 	          type: 'success'
				// 	        });
			
			
				// });
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post("t-user/insert", qs.stringify(this.form)).then(r => {
							this.$message({
								showClose: true,
								message: r.data.msg,
								type: 'success'
							})
							//刷新数据
							this.queryData();
						});
					} else {
						// console.log('error submit!!');
						return false;
					}
					this.dialogVisible = false;
			
				});
			
			},
			
			deldemo(id) {
				// alert(id);
				//根据id删除数据
				//物理删除
				// this.$axios.delete("t-demo/" + id).then(r => {
				// 	alert(r.data.msg);

				// })
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//点击确认的按钮
					this.$axios.delete("user/" + id).then(r => {
						this.$message({
							showClose: true,
							type: 'success',
							message: '删除成功!'
						});
						// 	//刷新数据
						this.queryData();
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				form: {
					uname: '',
					password: '',
					birthday: '',
					sex: '',
					rnamee: ''

				},

				rules: {
					uname: [{
						required: true,
						message: '请输入名字',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}],
					birthday: [{
						required: true,
						message: '请输入生日',
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: '请输入性别',
						trigger: 'change'
					}],
					rnamee: [{
						required: true,
						message: '请输入角色',
						trigger: 'change'
					}]

				},
				searchform: {
					user: "",
					sex: ""
				},
				page: {
					current: 1,
					total: 99,
					size: 4
				}
			}

		},
		created() {
			this.queryData();
		}
	}
</script>

<style>

</style>
